<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>个人资料</title>
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <style>
        .box {
            height: 7px;
            background: #c3c3c3;
            margin-top: 11px;
        }

        .big {
            height: 113px;
            border-bottom: 3px solid #d7d6d5;
            padding-left: 29px;
            font-size: 17px;
            color: #727272;
            line-height: 113px;
            letter-spacing: 2.4px;
            position: relative;
        }

        .big-a {
            position: absolute;
            left: 40%;
            top: 18px;
            width: 74px;
            height: 74px;
            border-radius: 50%;
        }

        .big-j {
            position: absolute;
            right: 27px;
            top: 47px;
            width: 11px;
            height: 18px;
        }

        .big-f {
            position: absolute;
            left: 56%;
            top: 82px;
            width: 15px;
            height: 11px;
        }

        .small {
            height: 69px;
            border-bottom: 3px solid #d7d6d5;
            letter-spacing: 2.4px;
            padding-left: 29px;
            line-height: 69px;
            color: #727272;
            font-size: 17px;
            position: relative;
        }

        .small-b {
            margin-left: 18%;
        }

        .big-i {
            position: absolute;
            right: 27px;
            top: 27px;
            width: 9px;
            height: 15px;
        }
        body{
          background-color: #fff;
        }
        .from {
            margin-top: 110px;
            height: 38px;
            border-radius: 8px;
            background: #ea5718;
            text-align: center;
            line-height: 38px;
            font-size: 17px;
            color: #fff;
            width: 80%;
            margin:10px 10%;
        }

        .d {
            position: absolute;
            right:27px;
            width: 15px;
            height:15px;
            top: 28px;
            background-color: rgba(0, 0, 0, 0)
        }
    </style>
</head>

<body>
<div id="vm">
    <div class="big-box" >
        <div class="verify">个人资料
            <img src="../../image/login/back.png" class="back" onclick="closeWin()">
        </div>
        <div class="box">
        </div>
        <div class="big">大头贴
            <img v-bind:src="avatar" onclick="fnSetAvatar()" alt="" class="big-a">
            <img src="../../image/VIP/47.png" alt="" class="big-f">
        </div>
        <div class="small">
            昵&nbsp&nbsp&nbsp称
            <input type="text" v-model="nickname" style="text-align:center;font-size:20px;letter-spacing:6px;"  @input="nickInput">
            <img src="../../image/login/delete.png" v-if="isnicknameflag" alt="" class="d" v-on:click="clearinput()">

        </div>
        <div class="from" @click="submit()">
            完成设置
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/rest.js"></script>
<script type="text/javascript" src="../../script/vue.2.5.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/faskclick.js"></script>
<script>
    var uid = $api.getStorage('uid');
    var session = $api.getStorage('session');
    var vm = new Vue({
        el: '#vm',
        data: {
            avatar:'../../image/my/bigmy.png',
            nickname: '昵称',
            isnicknameflag:true,
        },
        created: function() {
            var _this = this;
            apiready = function() {
                _this.init();
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }
                api.addEventListener({
                    name: 'uploadPic'
                }, function(ret, err) {
                    _this.avatar=ret.value.uploadPic
                });
                api.parseTapmode();
            }
        },
        methods: {
            init: function() {
                var _this = this;
                if(uid){
                  new rest().get('getUserInfo').datae({
                      uid: uid
                  }).success(function(res) {
                      if (res.flag == 1) {
                          _this.nickname=res.msg[0].nickname;
                          if(res.msg[0].img){
                            _this.avatar=res.msg[0].img;
                          }else{
                            _this.avatar='../../image/my/bigmy.png';
                          }

                      } else {
                          api.toast({
                              msg: res.msg[0],
                              duration: 2000,
                              location: 'middle'
                          });
                      }
                      console.log(JSON.stringify(res))
                  }).error(function(err) {
                      console.log(JSON.stringify(err))
                  }).run()
                }

            },
            nickInput() {
                var _this = this;
                _this.nickname = _this.nickname.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g, '');

                if (_this.nickname.length != 0) {
                    _this.isnicknameflag = true;
                } else {
                    _this.isnicknameflag = false;
                }
                if (_this.nickname.length > 10) {
                    _this.nickname = _this.nickname.substr(0, 10);
                    api.toast({
                        msg: '最多输入10个字',
                        duration: 2000,
                        location: 'middle'
                    });
                }
            },
            clearinput: function() {
                var _this = this;
                _this.nickname = '';
                _this.isnicknameflag = false;
            },
            submit(){
              var _this = this;

                new rest().get('finishUserInfo').datae({
                    _uid: uid,
                    session:session,
                    nickname:_this.nickname
                }).success(function(res) {
                    if (res.flag == 1) {
                        api.toast({
                            msg: '设置成功',
                            duration: 2000,
                            location: 'middle'
                        });
                        api.sendEvent({
                            name: 'modifynicknamesuccess',
                            extra: {
                                nickname: _this.nickname
                            }
                        });
                        api.closeWin();
                    } else {
                        api.toast({
                            msg: res.msg,
                            duration: 2000,
                            location: 'middle'
                        });
                    }
                    console.log(JSON.stringify(res))
                }).error(function(err) {
                    console.log(JSON.stringify(err))
                }).run()

            }

        },

    })



// 头像
function fnSetAvatar() {
    api.openFrame({
        name: 'avatar_frm',
        url: '../myself/avatar_frm.html',
        rect: {
            x: 0,
            y: 0,
            w: api.winWidth,
            h: api.winHeight,
        }
    });

}
    function closeWin(){
      api.closeWin();

    }
</script>

</html>
